<!-- 开店|店铺设置 -->
<template>
    <div class="openShop">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{titleName}}</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="row_up">
            <Group>
                <x-switch :title="titleAgr" v-model="isAgr"></x-switch>
                <div v-show="isAgr">
                    <x-input placeholder="请输入业务关系代码" v-model="agreementNo" :required="isAgr" @on-change="changeInputAgr" :min="StrLenth.agrMin" :max="StrLenth.agrMax">
                        <!-- 短-企业名称 -->
                        <span v-show="enterpriseName.length>0 && enterpriseName.length<=7" slot="right" class="enterprise_name">{{enterpriseName}}</span>
                    </x-input>
                    <!-- 长-企业名称 -->
                    <x-input v-show="enterpriseName.length>7" :value="enterpriseName | filter_name" readonly class="enterprise_name"></x-input>
                    <!-- 产销人员 -->
                    <selector placeholder="请选择产销人员" class="personnels" v-model="selectedSalePerson" :options="sealesPersos" v-show="havePMP"></selector>
                </div>
                <div v-show="!isAgr" class="row_up_area">
                    <div v-show="residentArea==true || residentArea.length==0">
                        <img alt="图片" src="~assets/x3/ico/icon-addre.png" />
                        <div class="remarks">
                            <div class="title">请选择常驻地区</div>
                            <div>我们将按照常驻地区信息分配服务机构</div>
                        </div>
                    </div>
                    <!-- 常驻地区选择 -->
                    <selector class="areaSelects" v-model="residentArea" :options="hotareas" @on-change="onChangeSelector"></selector>
                </div>
            </Group>
        </div>
        <!-- 协议勾选 -->
        <div v-show="isAgr && isOpenShop && !isNextSaveBtn" class="row_protocol">
            <span @click="confirmItem">
                <img v-show="isCheck" class="insure__img" src="~assets/x3/ico/check.png">
                <img v-show="!isCheck" class="insure__img" src="~assets/x3/ico/check_un.png">
            </span>
            <span class="insure__sure">
                <span @click="confirmItem">已阅读并同意</span>
                <a href="JavaScript:void(0);" @click="clauseRead()">《开店协议》</a>
            </span>
        </div>
        <!-- 显示协议的弹窗 -->
        <x-dialog v-model="showClauseRead" class="dialog-Einv" hide-on-blur>
            <div style="padding:10px">
                <div class="insure__clauseRead" style="overflow-y: overlay;">
                    <p align="left" v-html="readText"></p>
                </div>
            </div>
            <div>
                <x-button style="width: 100px !important;" @click.native="showClauseRead=false" mini type="primary">确认</x-button>
                <!-- <x-button mini>取消</x-button> -->
            </div>
        </x-dialog>
        <!-- button -->
        <div class="row_submit" v-show="!isNextSaveBtn">
            <x-button type="primary" action-type="button" :disabled="isQuery" @click.native="submitOne">{{oneSubmitBtnText}}</x-button>
        </div>
        <!-- next -->
        <div class="row_submit" v-show="isNextSaveBtn">
            <x-button type="primary" action-type="button" :disabled="isQuery" @click.native="submitTwo">确认保存</x-button>
        </div>
        <div class="row_applyAgrNo" @click="applyAgrNo">申请业务关系代码</div>
        <div class="row_applyAgrNo_remarks">
            <h4>业务关系代码说明</h4>
            <p>1. 普通用户：无需申请业务关系代码，即可领取积分并在积分商城进行消费。</p>
            <p>2. 代理人&商户（我是代理人/我是非保险机构）：需申请佣金/非佣金类业务关系代码，请点击申请业务关系代码，登记信息，我们将安排专人办理。申请业务关系代码后按照协议类型结算费用，不再享受积分类服务。</p>
        </div>
        <toast v-model="showToast" type="warn" position="default" :time="2000">{{showToastText}}</toast>
    </div>
</template>

<script>
import { XHeader, Group, Cell, XButton, XInput, XSwitch, Selector, Toast, XDialog } from "vux";
import { Mutations, RouteUrl, StrLenth, SelectorTag } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
export default {
    components: { XHeader, Group, Cell, XButton, XInput, XSwitch, Selector, Toast, XDialog },
    computed: mapState(["isWeChar", "user", "shop"]),
    data() {
        return {
            StrLenth: {}, //字符长度常量
            isOpenShop: true,//是否开店的状态
            showToast: false, //提示信息
            titleName: "我要开店",//页面标题名称
            showToastText: "", //提示信息
            isCheck: false,//是否已勾选协议
            isAgr: true,  //是否有业务关系代码
            titleAgr: "有业务关系代码",
            isQuery: true,//是否已查询业务关系代码
            agreementNo: "",//输入的业务关系代码
            enterpriseName: "",//业务关系代码的企业名称
            havePMP: false,//是否需要选中产销人员
            selectedSalePerson: "",//选中的产销人员
            sealesPersos: [],//产销人员列表
            residentArea: "",//选中的常驻地区
            hotareas: [],//常驻地区列表
            oneSubmitBtnText: "同意开店协议，确认开启",//提交按钮文本
            isNextSaveBtn: false,//是否显示下一步保存按钮
            isMounted: true,//是否第一次加载时用
            showClauseRead: false,//是否显示协议
            readText: "",//协议内容
            exclusiveYongjNo: 0,//专属佣金配置记录数
        };
    },
    filters: {
        filter_value(value) {
            return value;
        },
        filter_name(val) {
            return val.length > 17 ? val.substring(0, 18) + "..." : val;
        },
    },
    watch: {
        showClauseRead(cur, old) {
            if (cur) {
                $("body").css("overflow-y", "hidden");
            } else {
                $("body").css("overflow-y", "auto");
            }
        },
        //产销人员自动选择对应的人员
        sealesPersos(cur, old) {
            //自动选择常驻地区
            if (this.isMounted && this.$common.isNotEmpty(cur) && cur.length > 0) {
                for (let index = 0; index < cur.length; index++) {
                    let element = cur[index];
                    if (this.user.userDto.saleCode == element.key.saleVocationCardNo) {
                        this.selectedSalePerson = element.key;//选中项

                        this.isMounted = false;//关闭第一次使用
                    }
                }
            }
        },
        //自动选择对应的常驻地区
        hotareas(cur, old) {
            if (this.$common.isNotEmpty(cur) && cur.length > 0) {
                for (let index = 0; index < cur.length; index++) {
                    let element = cur[index];
                    if (this.$common.isNotEmpty(this.user.userDto.areaCode) && this.$common.isNotEmpty(element.key)
                        && this.user.userDto.areaCode === element.key.areaCode) {
                        this.residentArea = element.key;//选中项为key
                    }
                }
            }
        },
        //业务关系代码变化后清空企业名称
        agreementNo(cur, old) {
            if (cur != old) {
                this.enterpriseName = "";
            }
        },
        //有无关系代码切换按钮
        isAgr(cur, old) {
            if (cur) {
                this.isQuery = true;//禁用按钮激活
                this.changeInputAgr();
                this.titleAgr = "有业务关系代码";
            } else {
                this.titleAgr = "无业务关系代码";
                if (this.$common.isEmpty(this.hotareas) || this.hotareas.length < 1) {
                    //查询所有常驻地区
                    this.$common.storeCommit(this, Mutations.GET_ALL_HOT_AREA, this);
                }
                this.isQuery = false;//提交按钮激活
                this.isNextSaveBtn = false;//隐藏下一步按钮
            }
        },
        // residentArea(cur, old) {
        //     debugger
        //     console.log("cur=" + cur + ",,,,old=" + old);
        // },
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        },
        //协议勾选
        confirmItem() {
            this.isCheck = !this.isCheck;
        },
        //协议展示
        clauseRead() {
            let query = {
                _this: this,
                TYPE: "FORM",
                planId: "setShopProtocol",
                clauseTitle: "恒华出行宝店铺会员服务协议"
            }
            this.$common.storeCommit(this, Mutations.CUR_CLAUSE_TITLE_ONE, query);
            this.showClauseRead = true;
        },
        //申请业务关系代码链接
        applyAgrNo() {
            this.$common.goUrl(this, RouteUrl.APPLY_AGR_NO);
        },
        //常驻地区选项更改事件
        onChangeSelector() {
            //过滤无效选项的key值
            this.hotareas = this.$common.filterSelect(this.residentArea, this.hotareas);
        },
        //业务关系代码更改内容事件
        changeInputAgr() {
            if (this.isAgr) {
                if (this.$common.isNotEmpty(this.agreementNo) && this.agreementNo.length >= StrLenth.agrMin && this.agreementNo.length <= StrLenth.agrMax) {
                    this.isQuery = false;//启用第一步按钮

                    //因组件自动识别数据变化时触发本函数，所以已开店且第一次初始化时查询
                    if (this.isMounted && this.user.userDto.storeFlag === "1") {
                        //查询业务关系代码
                        this.queryAgreementNo();
                    }
                } else {
                    this.isQuery = true;//禁用第一步按钮
                }
                this.enterpriseName = "";//单位名称
                this.havePMP = false;//是否显示产销人员列表
                this.selectedSalePerson = "";//选择的产销人员
                this.sealesPersos = [];//产销人员列表

                this.isNextSaveBtn = false;//隐藏下一步按钮
            }
        },
        //根据业务关系代码获取销售人员信息
        getSealesPersos() {
            let array = [];
            //查询机构信息来匹配销售人员信息
            let _this = this;
            let data = { TYPE: "FORM", agreementNo: _this.agreementNo };
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
            _this.$http.post(RequestUrl.FIND_SEALES_PERSOS, data).then(function (res) {
                _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                if (res.state == 0 && !_this.$common.isEmpty(res.result)) {
                    //有销售人员信息
                    let lists = res.result.sealesPersos;
                    for (var i = 0, l = lists.length; i < l; i++) {
                        if (_this.$common.isEmpty(lists[i].saleName)) {
                            _this.showToastText = "请配置销售人员名称";
                            _this.showToast = true;
                            return;
                        }
                        if (_this.$common.isEmpty(lists[i].saleVocationCardNo)) {
                            _this.showToastText = "请配置销售人员编码";
                            _this.showToast = true;
                            return;
                        }
                        let obj = { key: lists[i], value: lists[i].saleName + "-" + lists[i].saleVocationCardNo };
                        array.push(obj);//销售人员列表
                    }
                }
            });
            return array;
        },
        //查询业务关系代码
        queryAgreementNo() {
            this.enterpriseName = "";//单位名称
            this.havePMP = false;//是否显示产销人员列表
            this.selectedSalePerson = "";//选择的产销人员
            this.sealesPersos = [];//产销人员列表
            this.agreementNo = this.agreementNo.toUpperCase();
            if (this.agreementNo == "CHQ003514") {
                this.showToastText = "业务关系代码被禁用，请联系销售人员"; this.showToast = true; return;//显示错误信息
            }
            let _this = this;
            let data = { TYPE: "FORM", agreementNo: this.agreementNo };
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
            _this.$http.post(RequestUrl.FIND_AGREEMENT_NO_OF_SHOP, data).then(function (res) {
                _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                if (res.state != 0) {
                    _this.showToastText = res.result; _this.showToast = true; return;//显示错误信息
                }
                let prpLmAgent = res.result.prpLmAgentList[0];
                if (prpLmAgent.isExclusiveYongj) {

                }
                _this.isNextSaveBtn = true;//显示下一步
                switch (prpLmAgent.alternate1) {
                    case "1":
                    case "2":
                    case "3":
                    case "4":
                    case "i":
                    case "k":
                        // [个人|机构]代理名称
                        _this.enterpriseName = prpLmAgent.agentName;
                        break;

                    default:
                        break;
                }
                if (res.result.selectSalePerson) {
                    _this.sealesPersos = _this.getSealesPersos();
                    _this.havePMP = true;//显示产销人员选择
                } else {
                    //非四川和广东地区无需选择代销人员
                    _this.havePMP = false;//隐藏产销人员选择

                    _this.isMounted = false;//非广东四川地区的业务关系代码使用后  直接关闭第一次使用
                    return;
                }
            });
        },
        //提交表单
        submitOne() {
            if (this.isAgr) {
                //已勾选协议
                if (!this.isCheck && this.isOpenShop) {
                    this.showToastText = "请勾选协议"; this.showToast = true; return;
                }
                //查询业务关系代码
                this.queryAgreementNo();
            } else {
                let data = {
                    url: RequestUrl.OPEN_STORE_BY_AREA,//开店/店铺设置_常驻地区
                    params: {
                        TYPE: "FORM",
                        userCode: this.user.userDto.userCode,
                        agreementNo: this.residentArea.agreementNo,//常驻地区默认业务关系代码
                        areaCode: this.residentArea.areaCode,//常驻地区编码
                    }
                };
                if (this.$common.isEmpty(data.params.agreementNo) || this.$common.isEmpty(data.params.areaCode)
                    || data.params.agreementNo == SelectorTag.keyNull) {
                    this.showToastText = "请正确选择地区"; this.showToast = true; return;
                }
                this.isShowDialog(this, data);//发起请求
            }
        },
        //下一步提交
        submitTwo() {
            this.agreementNo = this.agreementNo.toUpperCase();
            let data = {
                url: RequestUrl.OPEN_STORE_BY_AGREEMENT,//开店/店铺设置_有业务关系代码
                params: {
                    TYPE: "FORM",
                    userCode: this.user.userDto.userCode,
                    agreementNo: this.agreementNo,//业务关系代码
                }
            };
            if (this.$common.isEmpty(data.params.agreementNo) || data.params.agreementNo == SelectorTag.keyNull) {
                this.showToastText = "请输入业务关系代码"; this.showToast = true; return;
            }
            if (this.havePMP) {
                data.params.saleCode = this.selectedSalePerson.saleVocationCardNo;//销售人员编码
                data.params.saleName = this.selectedSalePerson.saleName;//销售人员名称
                if (this.$common.isEmpty(data.params.saleCode) || this.$common.isEmpty(data.params.saleName)) {
                    this.showToastText = "请选择销售人员"; this.showToast = true; return;
                }
            }
            this.isShowDialog(this, data);//发起请求
        },
        //再次提醒专属佣金配置会被清空
        isShowDialog(_this, data) {
            if (_this.exclusiveYongjNo > 0) {
                _this.$vux.confirm.show({
                    content: _this.$common.alertMsg("确认放弃专属费用政策吗？", "black;"), //显示内容
                    showInput: false, //是否显示input
                    confirmText: "确认",
                    cancelText: "取消",
                    onCancel() { ; },
                    onConfirm() {
                        _this.subForm(_this, data);//提交请求
                    }
                });
            } else {
                _this.subForm(_this, data);//提交请求
            }
        },
        //提交请求
        subForm(_this, data) {
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
            _this.$http.post(data.url, data.params).then(function (res) {
                _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                if (res.state != 0) {
                    _this.showToastText = res.result; _this.showToast = true; return;//显示错误信息
                }
                _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);//保存USER_INFO信息
                data = {
                    _this: _this,
                    msgData: {
                        headerTitle: "信息提示",
                        gaBackUrl: RouteUrl.INDEX,
                        buttonUrl: RouteUrl.SHOP_MANAGE,//路由到店铺管理
                        title: (_this.isOpenShop ? "开店" : "店铺信息修改") + "成功",
                        description: "",
                        buttonsType: "primary",
                        buttonsText: "进入店铺",
                    }
                }
                _this.$common.storeCommit(_this, Mutations.SET_MSG_DATA, data);
            });
        },
        //初始化当前页面信息
        initPage() {
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);
            }
            if (this.user.userDto.storeFlag === "1") {
                this.isOpenShop = false;
                this.titleName = "店铺信息设置";
                this.oneSubmitBtnText = "确认修改";
                this.agreementNo = this.user.userDto.agrementNo;
                if (this.$common.isNotEmpty(this.user.userDto.areaCode) && this.$common.isEmpty(this.user.userDto.agrementNo)) {
                    this.isAgr = false;//常住地
                    this.isMounted = false;//选择常住地的直接关闭第一次使用
                }
                let _this = this;
                //查询是否有设置专属佣金配置，如果有，则弹窗提醒
                _this.$http.post(RequestUrl.FIND_E_YONGJ_COUNT_BY_USER_CODE).then(function (res) {
                    if (res.state == 0) {
                        _this.exclusiveYongjNo = res.result;
                        if (_this.exclusiveYongjNo > 0) {
                            let msg = "您的店铺有配置专属费用政策，如果修改业务关系代码将失去专属配置，出单只能按通用政策结算费用";
                            _this.$common.showMsg(_this, msg, "gray;", false);
                        }
                    }
                });
            } else {
                this.isOpenShop = true;
                this.titleName = "我要开店";
                this.oneSubmitBtnText = "同意开店协议，确认开启";
                this.agreementNo = "";
            }
            document.title = this.titleName;
            this.StrLenth = StrLenth; //字符长度常量
        },
    },
    mounted() {
        this.$init.subPageInit(this);
        //初始化当前页面信息
        this.initPage();
    },
}
</script>

<style lang="scss" >
.openShop {
  //头部
  .row_up {
    width: 95%;
    margin: 15px auto;
    height: auto;
    border-radius: 5px;
    background-color: white;
    .weui-cell {
      border-top: 1px solid #efefef;
    }
    .weui-cell:before {
      border-top: 0px;
    }
    //关系代码公司名称
    .enterprise_name {
      color: #C8161D;
      font-size: 14px;
    }
  }
  //协议
  .row_protocol {
    margin: 15px auto;
    width: 95%;
    font-size: 14px;
    img {
      width: 14px;
      height: auto;
      float: left;
      margin: 4px 5px 0px 16px;
    }
    span {
      line-height: 18px;
      color: #b1b1b1;
    }
    a {
      color: #C8161D;
      text-decoration: none;
    }
  }
  //产销人员选项
  .personnels {
    .weui-cell__bd {
      .weui-select {
        color: #C8161D;
      }
    }
  }

  //协议内容弹窗
  .row_protocol {
    margin: 15px auto;
    width: 95%;
    font-size: 14px;
    img {
      width: 14px;
      height: auto;
      float: left;
      margin: 4px 5px 0px 16px;
    }
    span {
      line-height: 18px;
      color: #b1b1b1;
    }
    a {
      color: #C8161D;
      text-decoration: none;
    }
  }
  .insure__clauseRead {
    border-color: aliceblue;
    white-space: pre-wrap;
    vertical-align: top;
    width: 100%;
    font-size: 15px;
    height: 75vh;
    font-family: Microsoft YaHei;
    overflow-y: scroll; // border: 1px solid #f3f3f3;
    font: 400 14.3333px Arial;
  }
  .dialog-Einv {
    // padding: 15px !important;
    .weui-dialog {
      max-width: 90% !important;
    }
  }
  //常驻地区
  .row_up_area {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    background-color: white;
    border-top: 1px solid #efefef;
    img {
      display: block;
      width: 20px;
      height: 20px;
      float: left;
      padding: 18px 0px 0px 15px;
    }
    //选择常驻地区说明
    .remarks {
      display: block;
      float: left;
      width: 70%;
      height: 50px;
      line-height: 21px;
      font-size: 12px;
      padding: 10px 0px 0px 15px;
      color: #a9a9a9;
      .title {
        color: gray;
        font-size: 15px;
      }
    }
    //常驻地区列表
    .areaSelects {
      position: absolute;
      display: block;
      float: right;
      width: 95%;
      height: 60px;
      line-height: 60px;
      border: 0px;
    }
  }
  //提交按钮
  .row_submit {
    margin: 15px auto;
    width: 95%;
    // button {
    //   font-size: 16px;
    // }
    .weui-btn_disabled {
      background-color: gray;
    }
  }
  //申请业务关系代码链接
  .row_applyAgrNo {
    margin: 15px 10px;
    width: 150px;
    color: #C8161D;
    font-size: 14px;
  }
  //申请业务关系代码说明
  .row_applyAgrNo_remarks {
    margin: 15px auto;
    width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    font-size: 14px;
    h4 {
      color: black;
      padding: 5px 0px 10px 0px;
    }
    p {
      color: gray;
    }
  }
}
</style>
